<template>
  <view class="tabbar">
    <view class="tab" v-for="(item,index) in tabbarList" :key="index" @click="navigatorTo(item.url)">
      <!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
      <image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon"
        mode="widthFix"></image>
      <view :class="current == index ?'active':'text'">{{item.name}}</view>
    </view>
 
  </view>
</template>
 
<script>
  export default {
    name: "tabbar",
    props: {
      current: {
        type: Number,
        default: 0, //默认第一个页面tabbar激活
      },
    },
    data() {
      return {
        tabbarList: [{
          type: 0,
          icon: '/static/首页.png',
          selectIcon: '/static/首页_selected.png',
          name: '首页',
          url: '/common/pages/index/index',
        }, {
          type: 0,
          icon: '/static/订单.png',
          selectIcon: '/static/订单_selected.png',
          name: '行程',
          url: '/common/pages/order/order',
        }, {
          type: 0,
          icon: '/static/我的.png',
          selectIcon: '/static/我的_selected.png',
          name: '我的',
          url: '/common/pages/my/my',
        }]
      };
    },
	created() {
		let role=uni.getStorageSync("state")=="0"?true:false
		console.log("业务员："+role)
		if(role){
			this.tabbarList[1].name="订单"
		}
	},
    methods: {
      navigatorTo(e) {
        uni.switchTab({
          url: e,
        })
      },
    },
  }
</script>
 
<style lang="scss" scoped>
  .tabbar {
    position: fixed;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容iOS>= 11.2 */
    background-color: #FFFFFF;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
    // border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding-top: 12rpx;
    display: flex;
	padding-bottom: 10px;
    justify-content: space-around;
    align-items: center;
 
    .tab {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
 
    .imgsize {
      width: 46rpx;
      height: 46rpx;
    }
 
    .text {
      margin-top: 4rpx;
      padding-bottom: 12rpx;
      font-size: 20rpx;
      color: #333333;
      line-height: 20rpx;
    }
 
    .active {
      margin-top: 4rpx;
      padding-bottom: 12rpx;
      font-size: 20rpx;
      color: #2196F3;
      line-height: 20rpx;
    }
  }
</style>